<template>
	<el-container>
		<el-header>
			<div class="left-panel"> </div>
			<div class="right-panel">
				<el-button :icon="Search"   type="primary" @click="opBindData">查询</el-button>
				<el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
				<el-button text type="primary" @click="showCondition = !showCondition">
					<span v-if="!showCondition">展开</span>
					<span v-else>收起</span>
					<vab-icon class="vab-dropdown" :class="{ 'vab-dropdown-active': fold }" icon="arrow-up-s-line" />
				</el-button>
			</div>
		</el-header>
		<el-foot v-show="showCondition">
			<vab-query-form-top-panel>
				<el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px">
					<el-form-item label="对账时间" label-width="100px">
						<el-date-picker style="width: 300px" v-model="queryList.accountDate" type="datetimerange"
							value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" range-separator="-"
							unlink-panels="true" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="defaultTime"/>
					</el-form-item>
					<el-form-item label="对账申请编号" label-width="100px">
						<el-input placeholder="---请输入对账申请编号---" v-model="queryList.accountCode" style="width: 300px" />
					</el-form-item>
					<el-form-item label="单据编号" label-width="100px">
						<el-input placeholder="---请输入销售单编号---" v-model="queryList.orderCode" style="width: 300px" />
					</el-form-item>
					<el-form-item label="客户" label-width="100px">
						<el-input placeholder="---请输入客户名称---" v-model="queryList.StoreName" style="width: 300px" />
					</el-form-item>
					<el-form-item label="类型" label-width="100px">
						<el-select placeholder="---请选择类型---" v-model="queryList.receivingOrderType"
							style="width: 300px">
							<el-option label="---请选择类型---" value />
							<el-option v-for="item in receivingOrderTypeList" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="物料简码" label-width="100px">
						<el-input placeholder="---请输入物料简码---" v-model="queryList.materialSimpCode"
							style="width: 300px" />
					</el-form-item>
					<el-form-item label="物料编号" label-width="100px">
						<el-input placeholder="---请输入物料编号---" v-model="queryList.materialCode" style="width: 300px" />
					</el-form-item>
					<el-form-item label="物料分类" label-width="100px">
						<el-tree-select v-model="queryList.materialTypeIds"
						placeholder="---请选择物料分类---"
							:props="{ label: 'label', value:'value',children: 'children' }" :data="materialTypeTree"
							multiple :render-after-expand="false" show-checkbox style="width: 300px" />
					</el-form-item>
					<el-form-item label="物料名称" label-width="100px">
						<el-input placeholder="---请输入物料名称---" v-model="queryList.materialName" style="width: 300px" />
					</el-form-item>
					<el-form-item label="规格型号" label-width="100px">
						<el-input placeholder="---请输入规格型号---" v-model="queryList.materialSpecs" style="width: 300px" />
					</el-form-item>
				</el-form>
			</vab-query-form-top-panel>
		</el-foot>

		<el-main class="nopadding">
			<scTable ref="mytable" :span-method="objectSpanMethod" border :queryType="'sales-account/resultpages'"
				:data="listData" :queryList="queryList" :column="columnList" :orderList="OrderList"
				:sort-orders="['ascending', 'descending']" @selection-change="selectionChange"
				row-key="ReceivingOrderId" key="ReceivingOrderId" stripe show-summary remoteSummary>
				<!-- <el-table-column type="selection" width="50"></el-table-column> -->
				<el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
				<el-table-column label="对账申请编号" prop="accountCode" width="180" sortable></el-table-column>
				<el-table-column label="对账时间" prop="accountTime" width="180" sortable></el-table-column>
				<el-table-column label="单据编号" prop="orderCode" width="200" sortable></el-table-column>
				<el-table-column label="关联订单类型" width="120">
					<template #default="scope">
						{{scope.row.receivingOrderType=='0'?'要货订单':''}}
						{{scope.row.receivingOrderType=='1'?'退货订单':''}}
						{{scope.row.receivingOrderType=='2'?'空瓶订单':''}}
						{{scope.row.receivingOrderType=='3'?'赠送订单':''}}
					</template>
				</el-table-column>
				<el-table-column label="客户" prop="storeName" width="140"></el-table-column>
				<el-table-column label="关联要货单" prop="applyOrderCode" width="150"></el-table-column>
				<el-table-column label="物料编码" prop="materialCode" width="110" sortable></el-table-column>
				<el-table-column label="物料名称" prop="materialName" width="140" sortable></el-table-column>
				<el-table-column label="规格型号" prop="materialSpecs" width="90"></el-table-column>
				<el-table-column label="单位" prop="unitName" width="60"></el-table-column>
				<el-table-column label="结算数量" prop="qty" width="110" sortable></el-table-column>
				<el-table-column label="配送数量" prop="deliveryQty" width="110" sortable></el-table-column>
				<el-table-column label="结算单价" prop="price" width="110" sortable></el-table-column>
				<el-table-column label="要货单价" prop="applyPrice" width="110" sortable></el-table-column>
				<!-- <el-table-column label="差异" prop="lackPrice" width="250"></el-table-column> -->
			</scTable>

		</el-main>
	</el-container>
</template>

<script>
	import publicjs from "@/api/model/publicjs";
	import tool from "@/utils/tool";
	export default {
		components: {
			publicjs
		},
		data() {
			return {
				receivingOrderTypeList: [
				{
					value: 0,
					label: "销售出库单",
				},
				{
					value: 1,
					label: "销售退货单",
				}
			    ],
				orgType: '',
				columnList: [],

				queryList: {
					isAbnormal: 1,
					reconciliationStatus:''
				},
				selectionRows: [],
				materialTypeTree: [],
				showCondition: false,
				dialogPrint: false,
				dialogCheck: false,
				defaultTime:[
					new Date(2000, 1, 1, 0, 0, 0),
					new Date(2000, 2, 1, 23, 59, 59),
				]

			}
		},
		methods: {
			async opBindData() {
				this.$refs.mytable.clearSort();
				this.$refs.mytable.getData();
			},
			resetSearch() {
				this.queryList = {
					isAbnormal: 1
				}
			},
			//表格选择后回调事件
			selectionChange(selection) {
				this.selectionRows = selection;
				console.log(this.selectionRows)
			},
			//核对
			opCheck(row) {
				this.dialogCheck = true;
				this.$nextTick(() => {
					this.$refs.checkDialog.setData(row);
					this.$refs.checkDialog.open("Check");
				});
			},
			opPrintview(row) {
				this.dialogPrint = true;
				this.$nextTick(() => {
					var arr = [];
					arr.push(row);
					this.$refs.printDialog.setData(arr);
					this.$refs.printDialog.open("Show");
				});

			},
			//查看
			opShow(row) {
				this.dialogCheck = true;
				this.$nextTick(() => {
					this.$refs.checkDialog.setData(row);
					this.$refs.checkDialog.open("Show");
				});
			},
			allprintview() {

				if (this.selectionRows.length > 0) {
					this.dialogPrint = true;
					let uniqueArr = this.selectionRows.filter((item, index, self) =>
						index === self.findIndex((t) => t.receivingOrderId === item.receivingOrderId)
					);
					this.$nextTick(() => {
						this.$refs.printDialog.setData(uniqueArr);
						this.$refs.printDialog.open("Show");
					});
				} else {
					this.$message.error("请选择要打印的数据");
				}

			},
			async allaccount() {
				if (this.selectionRows.length > 0) {
					let uniqueArr = this.selectionRows.filter((item, index, self) =>
						index === self.findIndex((t) => t.receivingOrderId === item.receivingOrderId)
					);
					var ids = uniqueArr.map(item => {
						return item.receivingOrderId
					})
					const returnValue = await this.$API.auth.PostProcessApi.post(
						"receiving-order/account",
						ids
					);
					if (returnValue.status == 200) {
						this.$message.success(returnValue.msg);
						await this.opBindData();
					} else {
						this.$message.error("操作失败:" + returnValue.msg);
					}

				} else {
					this.$message.error("请选择要对账的数据");
				}
			},
			async initOptions() {
				// try {
				//     var returnValue = await this.$API.auth.PostProcessApi.post(
				//         "base-dictionary/options",
				//         { Codes: ["StorageOrderStatus"] }
				//     );
				//     if (returnValue.status == 200) {
				//         this.optionsState =returnValue.response.find(p=>p.code=="StorageOrderStatus").optionsDetails;
				//     } else {
				//         this.$message.error("操作失败:" + returnValue.msg);
				//     }
				// } catch (error) {
				//     this.loading = false;
				//     return false;
				// }
				try {
					var returnValue = await this.$API.auth.PostProcessApi.post(
						"material-type/tree", {
							status: 1
						}
					);
					if (returnValue.status == 200) {
						this.materialTypeTree = returnValue.response;
					} else {
						this.$message.error("操作失败:" + returnValue.msg);
					}
				} catch (error) {
					this.loading = false;
					return false;
				}
			},
		},
		async mounted() {
			debugger
			this.orgType = tool.data.get("USER_INFO").AccountType;
			console.log(this.orgType);
			if (this.orgType==2) {
				this.queryList.reconciliationStatus='3'
			}
			await this.opBindData();
			await this.initOptions();
			//this.listData = [{}]
		},
	}
</script>

<style>
</style>
